import React,{useState,useEffect} from 'react';
import { Select, Input, Button, Tag, Space, Table, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import * as service from '../../../../api/salary.js'
import '../PaySlip/PaySlip.scss'
dayjs.extend(customParseFormat);
const { Search } = Input;

function PaySlip(props: any) {
    var [payslip, setPayslip] = useState([])
    useEffect(()=>{
        service.salary_tip().then((res) => {
            console.log(res);
            setPayslip(res.data)
        })
    },[])
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        id: string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '工资条',
            dataIndex: 'salaryTip',
            key: 'salaryTip',
        },
        {
            title: '已发送',
            dataIndex: 'sended',
            key: 'sended',
        },
        {
            title: '已查看',
            dataIndex: 'looked',
            key: 'looked',
        },
        {
            title: '已确认',
            dataIndex: 'sureed',
            key: 'sureed',
        },
        {
            title: '生成日期',
            dataIndex: 'downdate',
            key: 'downdate',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_, record) => <a onClick={()=>{handleClick(record.id)}}>删除</a>
        },
    ];
    const data = payslip
    var onChange = () => { }
    var selete = (value:any) => { //选择月份
        console.log(value);
        service.tip_select({ salaryTip:value }).then((res) => {
            console.log(res);
            setPayslip(res.data)
        })
    }
    var handleClick = async (id: any) => { //删除单条工资条
        var res = await service.delete_tip({ id })
        // console.log(res);
        service.salary_tip().then((res) => {
            console.log(res);
            setPayslip(res.data)
        })
    }
    return (
        <div className='payslip'>
            <div className='payslip-one'>
                <div className='payslip-title-left'></div>
                <h4 className='payslip-title'>工资条</h4>
            </div>
            <div className='payslip-two'>
                <div className='payslip-two-box'>
                    <span>选择月份</span>
                    <Select
                        placeholder="请选择"
                        style={{ width: 300 }}
                        onChange={(value) => { selete(value) }}
                        options={[
                            { value: '2022年02月', label: '2022年02月' },
                            { value: '2022年03月', label: '2022年03月' }
                        ]}
                    />
                </div>
                <Button type="primary" ghost style={{ height: 40 }}><PlusOutlined />上传工资条</Button>
            </div>
            <Table columns={columns} dataSource={data} className='payslip-three' />
        </div>
    );
}

export default PaySlip;